import React, { Component } from 'react'
import { Menu ,Modal, Layout,message} from 'antd';
import {withRouter} from  'react-router-dom';
const { Header, Content, Sider } = Layout;
class Myhead extends Component {
    state = { visible: false };

    showModal = () => {
      this.setState({
        visible: true,
      });
    };
  
    handleOk = e => {
        message.success('退出登录成功');
        localStorage.removeItem('token');
        localStorage.removeItem('userInfo');
        this.props.history.push('/login');

      this.setState({
        visible: false,
      });
    };
  
    handleCancel = e => {
      this.setState({
        visible: false,
      });
    };
    person=()=>{
          this.props.history.push('/home/person');
    }
    render() {
        return (
            <Header className="header">
                <span style={{ color: '#fff', fontSize: '20px', marginLeft: '20px' }}>管理系统</span>
                <Menu theme="dark" mode="horizontal"  style={{ float: 'right' }}>
                    <Menu.Item key="1" onClick={this.showModal} >退出登录</Menu.Item>
                    <Modal
                        title={<div style={{ color: 'red', fontSize: '22px' }}>提示</div>}
                        centered={true}
                        visible={this.state.visible}
                        onOk={this.handleOk}
                        onCancel={this.handleCancel}
                        okText ='确定'
                        cancelText='取消'
                        
                    >
                        <div style={{ textAlign: 'center', fontSize: '20px', fontWeight: 700 }}>你确定退出登录吗?</div>
                    </Modal>
                    <Menu.Item key="2"  onClick={this.person}>个人中心</Menu.Item>
                </Menu>
            </Header>
        )
    }
}
export default  withRouter(Myhead)